$basic-menu-prefix-cls: #{config.$namespace}-basic-menu;
$basic-menu-pop-prefix-cls: #{config.$namespace}-basic-menu-sub-pop;

.#{$basic-menu-pop-prefix-cls} {
  min-width: 150px;
  &.el-menu--horizontal .el-menu .el-menu-item, &.el-menu--vertical .el-menu .el-menu-item{
    color: var(--menu-text-color);
    font-size: var(--menu-text-font-size);
    background-color: var(--menu-background-color);
    &:hover{
      color: var(--menu-text-hover-color);
      background-color: var(--menu-background-hover-color);
    }
    &.is-active{
      color: var(--menu-text-active-color);
      background-color: var(--menu-background-active-color);
    }
  }
}

.#{$basic-menu-prefix-cls} {
  width: 100%;
  --el-menu-horizontal-height: 48px;
  &.el-menu--horizontal, &.el-menu--vertical {
    border-bottom: unset;
    background-color: var(--menu-background-color);
    .el-sub-menu>.el-sub-menu__title, .el-menu-item, .el-menu--inline{
      color: var(--menu-text-color);
      font-size: var(--menu-text-font-size);
      background-color: var(--menu-background-color);
      &:focus{
        // 解决plus问题
        background-color: var(--menu-background-color);
      }
      &:hover {
        color: var(--menu-text-hover-color);
        background-color: var(--menu-background-hover-color);
      }
    }
    .el-sub-menu.is-active>.el-sub-menu__title, .el-menu-item.is-active {
      border-bottom: 2px solid var(--menu-text-color);
      // 解决plus中强制加important
      color: var(--menu-text-active-color);
    }
  }
  &.el-menu--vertical {
    border-right: unset;
   .el-sub-menu.is-active>.el-sub-menu__title, .el-menu-item.is-active {
      // 解决plus中强制加important
      // color: var(--menu-text-active-color) !important;

      color: var(--menu-text-color);
      border-bottom: unset;
    }
    .el-menu-item.is-active{
      background-color: var(--menu-background-active-color);
      color: var(--menu-text-active-color);
    }
  }

  &.el-menu--horizontal {
    --menu-text-color: #fff;
    --menu-background-color: transparent;
    --menu-text-active-color: #fff;
    height: 100%;
    .el-sub-menu>.el-sub-menu__title, .el-menu-item{
      // 复现
      &:hover {
        color: var(--menu-text-color);
        background-color: var(--menu-background-color);
      }
    }
  }
  &.el-menu--collapse>.el-sub-menu.is-active>.el-sub-menu__title{
    color: var(--menu-text-active-color)

  }
}
